<template>
    <div class="login_container">
        <div class="login_box">
            <div class="login_img"><img src="../../assets/logo.png" alt=""></div>
            <el-form :model="ruleForm" :rules="loginRules" ref="loginFormRef" class="demo-ruleForm">
                <el-form-item prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <div class="g-botton">
                    <el-button type="primary" @click="getLogin">登陆</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name:'Login',
    data(){
        return {
            ruleForm:{
                name:'',
                password:''
            },
            loginRules:{
                // 表单的验证规则
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        getLogin(){
            this.$refs.loginFormRef.validate((valid)=>{
                if(!valid)return
                this.$message({
                    message: '恭喜你，登陆成功',
                    type: 'success'
                });
                window.sessionStorage.setItem('token',"456")
                this.$router.push('/home')
                // 将登陆成功之后的token,保存到客户端的sessionStorage 中
                    // 项目中除了登陆之外的其他API接口，必须在登陆之后才能访问
                    // token 只应在当前网站打开期间生效， 所以将token 保存在sessionStorage 中
                // 通过编程式导航跳转到后台主页，路由地址是 /home
            })
        },
        reset(){
           this.$refs.loginFormRef.resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.login_container{
    background: #2b4b6b;
    height: 100vh;
    position: relative;
    .login_box{
        width: 450px;
        height: 300px;
        background: #fff;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        .login_img{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            position: absolute;
            left:50%;
            margin-left: -50px;
            background: #fafafa;
            border-radius: 50%;
            margin-top: -50px;
            box-shadow:0 0 10px rgba(0,0,0,.2);
            img{
                display: block;
                width: 60px;
            }
        }
    }
    .demo-ruleForm{
        padding:80px 40px 0 40px;
    }
    .g-botton{
        text-align: center;
    }
}
</style>